<template>
  <div class="container">
    <div style="position: absolute;left: 20%;">
    <h3>成绩录入/处理</h3>

    <table border="1" cellspacing="0" cellpadding="0">
      <tr>
        <td>
          学号:
          <input />
        </td>
        <td>
          姓名：
          <input />
        </td>
        <td>
          c语言
          <input />
        </td>
        <td>
          java
          <input />
        </td>
        <td>
          <a style="color:blue;text-decoration: underline;">录入</a>
          <a style="color:blue;text-decoration: underline;">重置</a>
        </td>
      </tr>
      <tr>
        <td>
          搜索:
          <input />
        </td>
        <td>
          排序字段:
          <input />
        </td>
        <td>
          排序顺序:
          <input />
        </td>
        <td colspan="2"></td>
      </tr>
    </table>
    <h3>成绩列表</h3>
    <div>
      <el-table :data="tableData" border style="width:700px">
        <el-table-column prop="date" label="学号" width="150"></el-table-column>
        <el-table-column prop="name" label="姓名" width="120"></el-table-column>
        <el-table-column prop="province" label="c语言" width="120"></el-table-column>
        <el-table-column prop="city" label="java" width="120"></el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "StudentScore",
  data() {
    return {
      tableData: [
        {
          date: "2020-06-27",
          name: "王小虎",
          province: "80",
          city: "70"
        },
        {
          date: "2020-06-27",
          name: "谢小牛",
          province: "69",
          city: "80"
        },
        {
          date: "2020-6-27",
          name: "张小鸡",
          province: "上海",
          city: "普陀区"
        },
        {
          date: "2020-6-27",
          name: "李小鸭",
          province: "90",
          city: "100"
        }
      ]
    };
  },
  methods: {
    handleClick(row) {
      console.log(row);
    }
  }
};
</script>

<style scoped>
input {
  width: 110px;
}
.container {
  display: flex;
  flex-flow: column;
  align-items: baseline;
  position: relative;
}
.container >>> .el-table--scrollable-x .el-table__body-wrapper {
  overflow-x: hidden;
}
</style>